//= require vendor/code-prettify/prettify.css

@import 'variables';
@import 'colors';
@import 'bootstrap_config';
@import 'bootstrap';
@import 'bootstrap_adjust';

@import 'font-awesome-sprockets';
@import 'font-awesome';

@import 'mixins';

@import 'code';
@import 'icons';
@import 'animations';
@import 'header_shared';

@import 'dartvm';
@import 'books';
@import 'os-tabs';
@import 'sidebar_shared';
@import 'toc_shared';
@import 'site_overrides';

// Extra variables (defined in terms of bootstrap and other defaults)
$font-color: $body-color;
$font-weight-light-bold: ($font-weight-normal + $font-weight-bold)/2;

/* -----------------------------------------
  Global
  ----------------------------------------- */

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: 400;
  color: $site-color-body;
}

section {
 position: relative;
}

h1, h2, h3, h4, h5, h6 {
 font-family: $site-font-family-gsans;
 font-weight: 400;
 margin-top: 1.5em;
 color: $site-color-body;
}

h1, .h1 {
  font-family: $site-font-family-gsans-display;
  font-size: $font-size-h1;
  margin-top: 0;
  margin-bottom: 0.67em;
}
h2, .h2 { font-size: $font-size-h2;}
h3, .h3 { font-size: $font-size-h3;}
h4, .h4 { font-size: $font-size-h4;}
h5, .h5 { font-size: $font-size-h5;}
h6, .h6 { font-size: $font-size-h6;}

p {}

dt {
  a {
    font-weight: $font-weight-bold
  }
}

a, button {
 text-decoration: none;
 color: $brand-primary;
 font-family: $site-font-family-roboto;
 font-weight: 400;
 &:visited {
   color: $brand-primary;
 }
 &:hover, &:focus, &:active {
   color: lighten($brand-primary, 25%);
   outline: none;
   text-decoration: none;
 }
 &.external {
  &:after {
    @include md-icon-content("launch");
    vertical-align: middle;
    margin-left: 2px;
    font-size: 10px;
    color: inherit;
    opacity: 0.5;
  }
 }
}
// Disable template-generated external links.
i.fa-external-link-alt {
  a.external & {
    display: none;
  }
  #sidenav & {
    display: none;
  }
}

form {
  .muted {
    font-size: 75%;
    color: $gray-light;
    text-indent: 0;
    padding: 10px;
  }
}
.select {
  position: relative;
  cursor: pointer;
  select {
    appearance: none;
    min-width: 120px;
    padding: 0 30px 0 10px;
    &:focus {
     outline: none;
    }
  }
  &:after {
    @include md-icon-content("chevron_left");
    display: block;
    position: absolute;
    right: 12px;
    top: 12px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    color: $gray-dark;
    pointer-events: none;
    @include transition();
  }
}
input, select {
  line-height: 32px;
  height: 32px;
  margin: 4px 0;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  background-color: $gray-light;
  color: $gray-dark;
  &:focus, &:active {
    outline-color: #fff;
  }
}

img {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------
  DOM
  ----------------------------------------- */

// Structure

#page-header {
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);

  // override of shared/_header.scss
  .site-header {
    box-shadow: none;
    .navbar {
      .nav-link {
        &.active {
          &:after {
            background-color: $site-color-card-link;
          }
        }
      }
    }
  }
}
#page-content {
  min-height: calc(100vh);

  body.homepage & {
    padding: 0;
    padding-bottom: 60px;
  }

  body.obsolete & {
    border: 10px solid $alert-warning-bg;
    border-top: none;
  }

  > article {
    > .content {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
      padding-top: $top-content-padding;
    }

    @media(min-width: 1024px) {
      margin-left: 280px;
    }

    @media(min-width: 1200px) {
      margin-right: 226px;
    }
  }
}

#page-footer {
  position: relative;
  background-color: $site-color-footer;
  color: $site-color-white;
  font-weight: 400;
  font-size: $font-size-small;
  z-index: 5;
  .brand {
    width: 120px;
  }
  .licenses {
    font-size: 10px;
  }
  h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: inherit;
    a {
      color: $white-base;
      &:hover, &:focus, &:active {
        color: $gray-lighter;
      }
    }
  }
  ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    li {
      display: inline;
      border-right: 1px solid $site-color-white;
      padding: 0 1rem;
      a {
        color: #ffffff;
        font-family: $site-font-family-gsans;

        &:hover, &:focus, &:active {
          color: $gray-lighter;
        }
      }
    }
    li:last-child {
      border: none;
    }
  }
}

// Banner
.banner {
  background-color: #e7f8ff;
  padding: 12px 0;
  text-align: center;
}

.banner__text {
  font-family: $site-font-family-roboto;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
}

.banner__frontpage-row {
  .content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .banner {
    margin-bottom: 0;
  }
}

// Navigation
#menu-toggle {
  display: none;
  align-items: center;
  line-height: 50px;
  margin-left: 20px;
  padding-right: 10px;
  cursor: pointer;
  z-index: 9999;

  i {
    font-size: 32px;
  }
}
#mainnav {
  background-color: $site-color-header;
  color: $site-color-header-text;
  display: flex;
  $mainnav-entry-spacing: 12px;
  ul {
    margin: auto;
    margin-right: 0;
    padding: 0;
    list-style: none;
    &:not(.dropdown-menu) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    li {
      padding: 0 $mainnav-entry-spacing;
      a {
        color: $site-color-header-text;
        display: inline-block;
        padding: 0 6px;
        font-size: $site-font-size-header;
        font-weight: 400;
        &:hover, &:active {
          color: $site-color-card-link;
        }
      }
      &.searchfield {
        position: relative;
      }
    }
  }
  .dropdown-menu {
    background-color: $site-color-header;
    margin-left: -$mainnav-entry-spacing;
    a:hover, a:focus { background-color: rgba(255, 255, 255, 0.05); }
    a.active:after {
      font-family: 'Font Awesome 5 Free';
      content: '\f00c'; // fas fa-check
      font-weight: 900;
      padding-left: .5em;
      // color: $brand-secondary;
    }
  }
  .brand {
    align-self: center;
    float: left;
    width: 85px;
    margin: 0 20px;
    overflow: hidden;
    line-height: 50px;
    position: relative;
    top: -1px;
  }
}
#subnav {
  min-height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
      width: 49%;
      a {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
      }
      &.next {
        float: right;
        text-align: right;
      }
    }
  }
}
// #footernav {}

// The left and right sidebar is dynamically repositioned as the user scrolls,
// to follow both the header's bottom and the banner's bottom position.
//
// On page load this repositioning happens with a delay, which causes a "flash"
// as it finally happens. The below rulesmatch the expected initial positions
// to minimize the "flash".
@mixin sidenav-top-position() {
  top: $site-header-height;

  body.show_banner & {
    top: $site-header-with-banner-height;
  }

  body.obsolete & {
    top: $site-header-with-obsolete-height;
  }

  body.obsolete.show_banner & {
    top: $site-header-with-banner-obsolete-height;
  }
}

#sidenav {
  @include sidenav-top-position;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 250px;
  border-right: 1px solid #d8d8d8;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;

  .site-sidebar {
    // override shared/_sidebar.scss
    padding: $top-content-padding 30px $content-padding;

    // override shared/_sidebar.scss
    // the first-level nav block is indented on the same level as the headers
    > .nav > .nav-item > .nav {
      padding-left: 0;
    }

    .nav-link {
      font-family: $site-font-family-roboto;
      font-weight: 400;
      color: $site-color-body;
      font-size: $font-size-small;

      .open_menu & {
        padding-bottom: 21px;
      }

      // center text and arrow button
      display: flex;
      flex-direction: row;
      align-items: center;

      // copy of shared/_sidebar.scss
      // @mixin collapsable() is not reachable from here, this is a copy of that
      &.collapsable {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          content: 'keyboard_arrow_down';
          font: $site-font-icon;
          transition: transform .25s ease-in-out;
        }

        &:not(.collapsed) {
          &::after {
            transform: rotate(180deg);
          }
        }
      }

      // override shared/_sidebar.scss
      &.collapsable::before {
        display: none;
      }

      &.external::after {
        display:none;
      }

      &[data-toggle] {
        &:not(.collapsable) {
          font-family: $site-font-family-gsans;
          font-weight: 400;
          font-size: 18px;
        }

        &.active {
          color: #555555;
        }
      }

      &.active {
        color: $site-color-sidebar-active;
        font-weight: 400;
      }
    }

    .navbar-nav {
      display: none;

      @media(max-width: 1024px) {
        display: block;
        margin-bottom: 1rem;

        a.nav-link {
          font-family: $site-font-family-gsans;
          font-weight: 400;
          font-size: 20px;

          &.active {
            color: $site-color-body
          }
        }
      }
    }
  }
}

.site-toc--button__toggle {
  display: none;
}

#site-toc--inline {
  background: #f5f5f7;
  padding: 15px 30px;
  margin-bottom: 1rem;

  .site-toc__title {
    font-size: 18px;
  }

  ul {
    list-style: none;
    padding-left: 1rem;
  }

  &.toc-collapsible {
    > .section-nav {
      margin-bottom: 0;
      padding-left: 0;
    }

    .site-toc--inline__toggle {
      float: right;
    }

    .toc-toggle-down {
      display: none;
    }

    &.toc-collapsed {
      .section-nav {
        max-height: 72px;
        overflow: hidden;
      }

      .toc-toggle-up {
        display: none;
      }

      .toc-toggle-down {
        display: inline-block;
      }
    }
  }
}

// The table-of-content section on the right side of the screen.
#site-toc--side {
  @include sidenav-top-position;

  position: fixed;
  bottom: 0;
  min-width: 226px;
  max-width: 246px;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: break-word;
  z-index: 999;

  // override shared/_toc.scss
  &.site-toc {
    padding: $top-content-padding 20px $content-padding 30px;
  }

  // Override BS defaults for .nav, etc.
  .site-toc__title {
    color: $site-color-body;
    font-size: 18px;
  }
  .toc-entry {
    padding-bottom: 0.5rem;

    // Indent subsequent lines
    margin-left: 1rem;
    text-indent: -1rem;

    & .toc-entry {
      margin-left: 0;
    }
  }

  .nav {
    display: block;
    padding-top: 0.5rem;
    .nav-link {
      color: $site-color-body;
      font-size: $font-size-small;
      font-weight: 400;
      padding: 1px 0;
      &.active {
        color: $site-color-sidebar-active;

        // removing the '>' before the menu item
        // override shared/_toc.scss
        &:before {
          display: none;
        }
      }
    }
  }

  body.hide_toc & {
    display: none;
  }
}

#site-search-results {
  display: none;
  position: relative;
  margin-top: 70px;
  padding: 20px;
  min-height: calc(100vh);
  button {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 999;
    &:hover {
      color: $gray;
    }
  }
}

/* -----------------------------------------
 Search
 ----------------------------------------- */
.site-header__search {
  margin-block-end: 0 !important;
  &::before {
    color: $gray;
    z-index: 1;
  }

  #mainnav & {
    // Override of _header.scss
    border: 0;

    .open_menu & {
      visibility: hidden;
    }
  }

  #sidenav & {
    display: none;
    border-bottom: 1px solid $site-color-light-grey;
    flex-shrink: 0;
    margin: 0;
    padding: 0 $site-nav-mobile-side-padding;
    order: -1;

    // Override of _header.scss
    &::before {
      left: 1.5rem;
    }
  }
}

.site-header__searchfield {
  border: 0;
  box-shadow: none;

  #mainnav & {
    background-color: $site-color-header;
    color: $site-color-header-text;
    font-size: $site-font-size-header;

    // Override of _header.scss
    @include media-breakpoint-down(sm) {
      font-size: inherit;
      height: inherit;

      width: 24px !important;
      &:focus {
        width: 220px !important;
      }
    }
  }

  #sidenav & {
    font-size: $font-size-lg;
    height: 66px;
    width: 100%;

    // Override of _header.scss
    @include media-breakpoint-up(md) {
      width: 100% !important;
      &:focus {
        width: 100% !important;
      }
    }
  }
}

input.gsc-search-button {
  @extend .btn;
  @extend .btn-primary;
}

#search-icon {
  position: absolute;
  right: 5px;
  top: 0;
  color: $gray-dark;
  font-size: 14px;
}

/* -----------------------------------------
 Table of Contents (jekyll-toc)
 ----------------------------------------- */

.toc-entry.toc-h1,
// .toc-entry.toc-h2,
// .toc-entry.toc-h3,
.toc-entry.toc-h4,
.toc-entry.toc-h5,
.toc-entry.toc-h6,
.no_toc {
 display: none;
}

/* -----------------------------------------
 Anchor links
 ----------------------------------------- */
$icon-size: 24px;
$anchor-padding: 4px;

main .content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    .anchor {
      float: left;
      margin-left: -($icon-size + $anchor-padding);
      padding-right: $anchor-padding;
      overflow: hidden;

      .octicon-link {
        @include transition(.1s);

        @include md-icon-before("link");
        font-size: 24px;
        color: $site-color-body;
        opacity: 0;

        &:hover {
          color: lighten($brand-primary, 25%);
        }
      }

      &:focus .octicon-link {
        opacity: 1
      }
    }

    &:hover {
      .anchor .octicon-link {
        opacity: 1
      }
    }

    // Push # link targets clear of page header.
    &[id] {
      scroll-margin: 60px;
    }
  }

  // Push # link targets clear of page header.
  a[id] {
    scroll-margin: 60px;
  }
}

/* -----------------------------------------
  Utility Classes
 ----------------------------------------- */

.content {
  position: relative;
  padding: $content-padding;
}

.button {
  padding: 5px 10px;
  color: $blue;
  border-radius: 8px;
}

// Columns
.col2 {
  list-style: none;
  column-count: 2;
  column-gap: 0;
  padding-left: $font-size-base / 2;
  li {
    page-break-inside: avoid;
    padding: $font-size-base / 2;
    font-size: smaller;
  }
}
.col3 {
  list-style: none;
  column-count: 3;
  column-gap: 0;
  li {
   page-break-inside: avoid;
  }
}

.break-50 {
  width: 50% !important;
}
.break-60 {
  width: 60% !important;
}
.break-70 {
  width: 70% !important;
}
.break-80 {
  width: 80% !important;
}
.break-90 {
  width: 90% !important;
}

.card-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

.card {
  display: block;
  position: relative;
  width: 300px;
  height: auto;
  min-height: 100px;
  padding: $content-padding;
  margin: 15px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #294058;
  border-radius: 0;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
  color: $site-color-card-text;

  h1, h2, h3, h4, h5, h6 {
    font-family: $site-font-family-gsans;
    margin-top: 0;
    a {
      color: $site-color-card-text;
      font-family: $site-font-family-gsans;
    }
    .octicon-link {
      display: none !important;
    }
  }

  h3 {
    font-size: $font-size-h2;
  }

  a {
    color: $site-color-card-link;
  }

  &.narrow { width: 250px; }
}

// Support for .card-grid formatted as a markdown unordered list
ul.card-grid { padding-left: 0; }

// Platform logos
li.card {
  color: inherit;
  background-color: transparent;
  box-shadow: none;
  .logo {
    display: block;
    padding-bottom: $font-size-base;
  }
  h1, h2, h3, h4, h5, h6 {
    a {
      color: inherit;
    }
  }
}

// Color Palette
.slogan {
  background-color: $brand-primary;
  text-align: center;
  h1, h2, h3 {
    margin: 0;
  }
}
.gray-dark {
 background-color: $gray-dark;
 color: $white-base;
 h1, h2, h3, h4, h5, h6 {
   color: $white-base;
 }
}
.gray-light {
 background-color: $gray-light;
 color: $gray-dark;
 h1, h2, h3, h4, h5, h6 {
   color: $gray-dark;
 }
}

@mixin dart-style-for($kind, $bg-color, $fg-color, $msg) {
  .#{$kind} {
    background-color: $bg-color !important;
    position: relative;
    &:after {
      font-family: $font-family-monospace;
      font-size: 0.75rem;
      font-weight: 500;
      content: $msg;
      position: absolute;
      top: 6px;
      left: 8px;
      color: $fg-color;
    }
  }
}

@include dart-style-for(good, $alert-success-bg, $alert-success-fg, 'good');
@include dart-style-for(bad, $alert-danger-bg, $alert-danger-fg, 'bad');

@include dart-style-for(passes-sa, $alert-success-bg, $alert-success-fg, '\2714  static analysis: success');
@include dart-style-for(fails-sa, $alert-danger-bg, $alert-danger-fg, '\2717  static analysis: error/warning');

@include dart-style-for(runtime-success, $alert-success-bg, $alert-success-fg, '\2714  runtime: success');
@include dart-style-for(runtime-fail, $alert-danger-bg, $alert-danger-fg, '\2717  runtime: error');

.muted {
  color: $gray;
}

.footnote {
  margin: 0;
  padding: 0;
  list-style-type: none;
  li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;
    &:before {
      content: counter(step-counter);
      position: absolute;
      left: -25px;
      top: -3px;
      font-size: 20px;
      font-weight: bold;
      padding: 3px 8px;
    }
  }
}

.code-notes {
  list-style-type: none;
  padding-left: 0;
  display: table;
  li {
    counter-increment: code-note-counter;
    display: table-row;
    padding-left: 8px;
    &:before {
      font-family: $font-family-monospace;
      content: '/*' counter(code-note-counter) '*/' ;
      display: table-cell;
      text-align: right;
      color: $teal;
      padding-right: $font-size-base / 2;
      // background-color: lightyellow;
    }
  }
}

/* -----------------------------------------
  Bootstrap Overwrites
 ----------------------------------------- */
.container {
 position: relative;
 max-width: 100%;
 width: $live-content-width;
 margin: 0 auto;
}
.page-header {
  margin: 0;
  margin-bottom: 10px;
  padding: $content-padding;
  border-bottom: 1px solid $gray;
  h1, h2 {
    font-size: 36px;
  }
}

// TODO: replace usage of .panel with .mini-toc

.mini-toc {
  @extend .alert;
  background-color: $gray-light;
}

.panel {
  background-color: $gray-light;
  padding: $content-padding;
  margin-bottom: 20px;
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 5px;
  }
  ul {
    padding-left: 15px;
  }
}

// Popovers

h3.popover-header {
  font-weight: $font-weight-light-bold;
  margin-top: 0;
}

@mixin popover-open {
  &.popover-open {
    font-weight: 500;
    border-color: $default-link;
  }
}

[data-toggle="popover"] {
  background: none;
  border-bottom: 2px dotted $gray;
  padding: 0;
  cursor: pointer;
  @include popover-open;
}

@media (hover: hover) {
  [data-toggle="popover"]:hover { border-color: $default-link !important; }
}

.table {
  width: 100%;
  @extend .table-striped;

  // override .table-striped macro, remove top border
  td { border-top: none; }
}

.table-wrapper {
  overflow-x: auto;
}

.alert {
  border: none;
  border-radius: 0;
  color: $site-color-body;
  margin-top: 32px;
  padding: 30px 30px;

  pre, code {
    background-color: transparent;
  }
  p:last-child {
    margin-bottom: 0;
  }
  &.alert-success {
    width: auto;
    background-color: $alert-success-bg;
  }
  &.alert-info {
    width: auto;
    background-color: $alert-info-bg;
  }
  &.alert-warning {
    width: auto;
    background-color: $alert-warning-bg;
  }
  &.alert-danger {
    width: auto;
    background-color: $alert-danger-bg;
  }
  &.alert-obsolete {
    width: auto;
    background-color: $gray-dark;
    color: $white-base;
  }
}

.alert-with-image {
  display: table-row;
  > img {
    margin-right: $content-padding * 2;
    width: $font-size-base * 3;
    @include media-breakpoint-down(sm) { display: none; }
  }
  > div {
    display: table-cell;
    @include media-breakpoint-up(sm) { padding-left: $content-padding; }
    vertical-align: top;
  }
}

/* Used for inlined icon markers, usually at the start of a paragraph */
.content > p > i.material-icons {
  vertical-align: bottom;
}

.breadcrumb { // Override BS
  font-size: $font-size-sm;
  background-color: transparent;
  padding: 0;
  @at-root {
    .breadcrumb-item {
      + .breadcrumb-item {
        padding-left: 0; // Fix BS 4.1 padding issue: push left padding into ::before for balance
        &::before {
          padding-left: $breadcrumb-item-padding;
          @include md-icon-content($breadcrumb-divider, 1rem + 2 * $breadcrumb-item-padding);
        }
      }
      &.active a {
        color: $breadcrumb-active-color;
        cursor: default;
      }
    }
  }
}

ul.nav-list {
  list-style: none;
  padding: 0;
  li {
    border-bottom: 1px solid $gray-light;
    h2 {
      font-weight: 400;
      font-size: 20px;
      margin-bottom: 0;
    }
  }
}

#page-github-links {
  float: right;
  .btn {
    color: $site-color-body;
    $padding-x: $btn-padding-x / 2;
    padding-left: $padding-x;
    padding-right: $padding-x;
  }
  .fa-sm {
    font-size: 14px;
  }
}

/* -----------------------------------------
  Templates
 ----------------------------------------- */
// Homepage

body.homepage {
  #sidenav {
    display: none;
  }
  #code-sample-section {
    padding-top: 30px;
    h3 { margin-top: 0; }
  }
  section {
    padding: 0;
  }
  pre.prettyprint {
   margin-top: 0;
   height: 200px;
   overflow: auto;
  }
  .card-grid {
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

// Error Page
body.error {
  #sidenav {
    display: none;
  }

  .banner {
    display: none;
  }

  background-color: #132030;
  background-image: asset_url('404-bg-pattern.jpg');
  color: #8d9399;

  @media(min-width: 1600px) {
    background-size: cover;
  }

  h1 {
    color: white;
    font-family: $site-font-family-gsans-display;
    font-size: 100px;
    margin: 0px auto;
  }

  h2 {
    color: white;
    font-family: $site-font-family-gsans;
    font-size: 24px;
    margin: 8px auto 16px;
  }

  #in-content-search {
    input[type="search"] {
      display: inline-block;
      background: #35404d;
      color: white;
      font-size: 20px;
      padding: 10px 40px;
      border-radius: 30px;
      height: 70px;
      line-height: 70px;
      width: 100%;
      max-width: 880px;
      margin: 0px auto 88px;
    }
  }

  .content {
    a {
      color: $site-color-card-link;
    }
  }
}

// Top-level Page
body.top {
  #sidenav {
    display: none;
  }
  #site-toc--inline { display: block; }
  #site-toc--side { display: none; }
}

body.obsolete {
  #page-header {
    .alert {
      margin: 0;
      h4 {
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }
}
/* -----------------------------------------
  Media Queries
 ----------------------------------------- */

@media(max-width: 1024px) {

  #menu-toggle {
    display: flex;
  }

  #sidenav {
    top: 0 !important;
    max-height: 100vh !important;
    bottom: 0;
    left: -100vw;
    min-width: 300px;
    max-width: calc(100vw - 60px);
    background: #fff;
    z-index: 9999;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    @include transition(left, .5s);

    .site-header__search {
      display: flex;
    }

    .nav-link {
      white-space: nowrap;
    }
  }

  body.open_menu {
    &:before {
      content: '';
      display: block;
      position: fixed;
      top: 0; bottom: 0;
      left: 0; right: 0;
      height: 100%;
      z-index: 999;
      background-color: rgba($gray-base,0.5);
      cursor: pointer;
      pointer-events: none;
      @include transition(0.5s);
    }
    #sidenav {
      display: block;
      left: 0 !important;
    }
  }
}

@media(max-width: 960px) {
  #mainnav {
    ul {
      li {
        display: none;
        &.searchfield {
          display: block;
        }
      }
    }
  }
}

@media(max-width: 600px) {
  .card {
    width: 100%;
  }
  .break-50,
  .break-60,
  .break-70,
  .break-80,
  .break-90 {
    width: 100% !important;
  }
}

@media(max-width: 479px) {
  #menu-toggle {
    order: 2;
  }
  #mainnav {
    ul {
      li {
        &.searchfield {
          display: none;
        }
      }
    }
  }
}

// FIXME: move into _code.scss once #2008 is merged
.prettify-filename {
  position: relative;
  text-align: right;
  margin-right: $font-size-base;
  margin-top: -$font-size-base * 2.5;
  margin-bottom: $font-size-base;
  opacity: 0.5;
}

blockquote {
  border: solid #b3b3b3;
  border-width: 1px 0px;
  margin: 20px;
  padding: 10px 20px 0 20px;
}

.searchbar {
  > * {
    max-width: 640px;
    width:100%
  }
}

@import '_overwrites';
@import '_dash';
